<template>
  <a-row :gutter="4">
    <a-col :md="8">
      <a-card title="分组">
        <vxe-toolbar>
          <template #buttons>
            <a-space>
              <a-button type="primary">添加</a-button>
              <a-button>导入</a-button>
              <a-button type="danger">批量删除</a-button>
            </a-space>
          </template>
        </vxe-toolbar>
        <vxe-table ref="xTable1" border stripe height="400"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="分组名称" title="分组名称" sortable>重量单位</vxe-column>
          <vxe-column field="操作" title="操作" fixed="right" width="150">
            <template #default>
              <a-button type="link">编辑</a-button>
              <a-button type="link" danger>删除</a-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="20"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-card>
    </a-col>
    <a-col :md="16">
      <a-card title="明细">
        <vxe-toolbar>
          <template #buttons>
            <a-space>
              <a-button type="primary">添加</a-button>
              <a-button>导入</a-button>
              <a-button type="danger">批量删除</a-button>
            </a-space>
          </template>
        </vxe-toolbar>
        <vxe-table ref="xTable1" border stripe height="400"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="编码" title="编码" sortable> </vxe-column>
          <vxe-column field="名称" title="名称" sortable> </vxe-column>
          <vxe-column field="换算率" title="换算率" sortable align="right">100</vxe-column>
          <vxe-column field="是否主单位" title="是否主单位" sortable show-overflow align="center">
            <template #default="{ row }"><a-tag color="green">{{ row.是否主单位 ? row.是否主单位 : "否" }}</a-tag></template>
          </vxe-column>
          <vxe-column field="操作" title="操作" fixed="right" width="150">
            <template #default>
              <a-button type="link">编辑</a-button>
              <a-button type="link" danger>删除</a-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: 'Table',
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [
        {
          "子物料": "部件1",
          "数量": "2",
          "单位": "EA",
          "备注": "",
        },
        {
          "子物料": "部件2",
          "数量": "2",
          "单位": "EA",
          "备注": "",
        },
        {
          "子物料": "部件3",
          "数量": "2",
          "单位": "EA",
          "备注": "",
        },
        {
          "子物料": "部件4",
          "数量": "2",
          "单位": "EA",
          "备注": "",
        },
      ]
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style scoped lang="less"></style>